import React from 'react';
import { NavBar, TabBar } from 'antd-mobile';
import styles from './Layout.less';
import { withRouter } from 'dva/router';

const navigation = [{
  pathname: '/doctor',
  title: '我的国医',
  icon: require('../assets/icons/icon-doctor.svg'),
  selectedIcon: require('../assets/icons/icon-doctor-active.svg'),
}, {
  pathname: '/healthy',
  title: '健康管理',
  icon: require('../assets/icons/icon-healthy.svg'),
  selectedIcon: require('../assets/icons/icon-healthy-active.svg'),
}, {
  pathname: '/settings',
  title: '我',
  icon: require('../assets/icons/icon-user.svg'),
  selectedIcon: require('../assets/icons/icon-user-active.svg'),
}];

const Layout = (props) => {
  const { router, location, children } = props;
  const { state, pathname, query } = location;
  const goto = (pathname, title) => router.push({
    pathname,
    state: { title },
  });

  const whitelist = /doctor\/\d+|signin|signup|native|forgot/;
  const shouldHiddenTabBar = query.s === 'app' || whitelist.test(pathname);

  return (
    <div className={styles.container}>
      {/*<NavBar
        className={styles.navbar}
        leftContent={state && state.navbarLeftContent || '返回'}
        rightContent={state && state.navbarRightContent}
        onLeftClick={() => history.back()}>
        {state && state.title}
      </NavBar>*/}

      <div className={styles.view}>
        {children}
      </div>

      {shouldHiddenTabBar ? null : (
        <TabBar
          unselectedTintColor="#3e3a39"
          tintColor="#aa4929">
          {navigation.map((nav, i) =>
            <TabBar.Item
              key={i}
              icon={{ uri: nav.icon }}
              selectedIcon={{ uri: nav.selectedIcon }}
              title={nav.title}
              badge={nav.badge}
              onPress={() => goto(nav.pathname, nav.title)}
              selected={pathname.indexOf(nav.pathname) !== -1} />
          )}
        </TabBar>
      )}
    </div>
  );
};

export default withRouter(Layout);
